<%@ page language="java" pageEncoding="UTF-8"%>

<%@ include file="/common/taglibs.jsp"%>
<!--分页查询共用的页面-->
<%@ include file="/common/paginateUtil.jsp"%>
<!--日期控件-->
<%@ include file="/common/dateUtil.jsp"%>
<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/css/jquery.monthpicker.css"/> 
<script type="text/javascript" src="<%=jsPath%>/jquery.monthpicker.js"></script>
<style>
.innertable{
border-collapse: collapse;
border:0px;
font-size:12px;
}


select.monthpick {
margin-right: 5px;
}

select.yearpick {
margin-left: 5px;
}
 </style>

 <style>

</style>

</head>

		<script type="text/javascript" charset="utf-8">

        var currentYearMonth = "";
		var currentDay = 0;
		function getDaysInOneMonth(year, month){  
			  month = parseInt(month, 10);  
			  var d= new Date(year, month, 0);  
			  return d.getDate();  
		} 

            //EasyUI内存分页插件
		function pagerFilter(data){
			if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var dg = $(this);
			var opts = dg.datagrid('options');
			var pager = dg.datagrid('getPager');
			pager.pagination({
				onSelectPage:function(pageNum, pageSize){
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
					pager.pagination('refresh',{
						pageNumber:pageNum,
						pageSize:pageSize
					});
					dg.datagrid('loadData',data);
				}
			});
			if (!data.originalRows){
				data.originalRows = (data.rows);
			}
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = (data.originalRows.slice(start, end));
			return data;
		}

			
			function getdynamicColumns(year, month)
			{
				 var initColumns = [
						{ "field": "plateNo", "title":"车牌号", "width": "5%"},
						{ "field": "depName", "title":"车组", "width": "15%" }
				  ];
				var daysOfMonth = getDaysInOneMonth(year,month);
				var selectYearMonth = year + "-" + month;
				if(selectYearMonth == currentYearMonth)
				{
					daysOfMonth = currentDay;
				}
				for(var m = 1; m <= daysOfMonth; m++)
				{
					initColumns.push({"field": (""+m), "title":(""+m), "width": "3%"});  
				}; 
				
				//initColumns.push({ "mData": "staticDate","sTitle":"统计日期" });
				return initColumns;
			}

			function createGrid(data)
			{
				var year = 2017;
				var month = 8;
				var strYearMonth = $("#monthpicker").val();
				var year = strYearMonth.substr(0,4);
				var month = strYearMonth.substr(5,2);
				var columns = getdynamicColumns(year, month);
				var grid=	$("#grid");	
				grid.datagrid({
							columns: [columns],
							//height: 165,
							//url: treeUrl,
							method: 'POST',
							fit:true,
							toolbar:"#toolbar",
							queryParams: { 'id': 2 },
							idField: 'plateNo',
							striped: true,
							fitColumns: false,
							singleSelect: true,
							rownumbers: true,
							pagination: true,
							loadFilter:pagerFilter,
							nowrap: true,
							pageSize: 20,
							pageList: [20, 20, 50, 100, 150, 200],
							showFooter: true
						});
				grid.datagrid("loadData", data);
				//setTimeout("loadGrid()", 3000);
				return grid;
			}

			function excelExport()
			{
				//验证要统计的报警类型是否选择
				Utility.excelExport('<%=ApplicationPath%>/alarmStatistic/export.action');
			}

			function submitForm()
			{
				$("#queryForm").ajaxSubmit({
						beforeSubmit:function(){
							  var  depId = $("input[name='depId']").val();
							  var plateNo = $("input[name='plateNo']").val();
							  if(depId > 0 || plateNo.length > 0)
							{
								  return true;
							}else
							{
								$.messager.alert("提示","车牌号和部门查询条件至少要选择一个！");
							}
						},
						success:function(result)
						{
							if(result.success)
							{
								createGrid(result.data);
							}else
							{
								$.messager.alert("提示","统计发生错误:"+result.message);
							}
						}
					});
			}
			var first = true;
			$(document).ready(function() {
			      //对应数据库SQL查询的字段名
			    
                      $(".datepicker").today();//设置当前日期
				 
					  $("#intervalType").lookup({category:"ReportType"}); //统计类型下拉框
				 
			     //创建下拉部门树
				Utility.createDepTree("depId");

					Utility.ajaxSubmitForm("queryForm", {
						beforeSubmit:function(){
							
						},
						success:function(result)
						{
							if(result.success)
							{
								createGrid(result.data);
							}else
							{
								$.messager.alert("提示","统计发生错误:"+result.message);
							}
						}
					});
				  
				  var months =  ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
	              //$('#monthpicker').monthpicker({'month' :months,'minYear' : 2017,'maxYear' : 2017});
				  
	              var dt = new Date();
				  var dateObj = Utility.getDate(dt);
				  var years = [];
				  for(var m = 2017; m <= dateObj.year; m++)
				  {
					  years.push(m);
				  }
				  currentYearMonth = dateObj.year + "-" + dateObj.month;
				  currentDay = dateObj.day;
				  $("#startDate").val(currentYearMonth + "-01");
				  $("#endDate").val(currentYearMonth + "-" + currentDay);

				  $('#monthpicker').val(currentYearMonth);
				  $('#monthpicker').monthpicker({ 
						years: years, 
						topOffset: 6,
						onMonthSelect:function(monthIndex, year)
					  {
							monthIndex += 1;
							var daysOfMonth = getDaysInOneMonth(year,monthIndex);
						    var selectYearMonth = year + "-" + (monthIndex < 10 ? ("0" + monthIndex) : monthIndex);
							if(selectYearMonth == currentYearMonth)
							{
								daysOfMonth = currentDay;
							}

				          $("#startDate").val(selectYearMonth + "-01");
				          $("#endDate").val(selectYearMonth + "-" + daysOfMonth);
					  }
					});

			} );
		</script>
<body>	
		<div id="toolbar">
			
			<form id="queryForm" action="<%=ApplicationPath%>/mileageStatistic/statistic.action" method=POST>
			   <input type="hidden" name="queryId" value="report.selectMileageStaticByMonth" />	
			   <input type="hidden" id="alarmTypeName"  name="alarmTypeName" value="" />		  
			   <input type="hidden" id="startDate"  name="startDate" value="" />		   	  
			   <input type="hidden" id="endDate"  name="endTime" value="" />
			  <table width="100%"  class="TableBlock">
			   			   <tr>
			   <td> 车牌号码: </td>
			    <td>			    <input type="text" name="plateNo" size="10"  id="plateNo">   </td>
            <td>车辆组:</td>
			    <td>			
				<select id="depId" name="depId" style="width:200px;"></select>
				</td>
            </tr>
	 <tr>
			   <td> 统计月份 </td>
			    <td >			    <input type="text" id="monthpicker" name="month">   </td>
             
        <td  align="left" colspan=2>
	       <a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="submitForm();">查询</a>&nbsp;
		   <a id="btnReset" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" >重置</a>&nbsp;
		   <!--
		   <a id="btnExport" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel'" onclick="excelExport();">导出</a>--><!--调用utility.js-->
        </td>
    </tr>
		</table>
		</form>	 
	</div>

			<div id="grid"></div>
</body>

